<template>
  <div class="LoginPic">
    <el-form ref="loginForm" :model="loginForm" :rules="rules" class="loginContainer">

      <h1 class="loginTitle">未闻花名</h1>

      <el-form-item prop="account">

        <el-input type="text" v-model="loginForm.account" placeholder="请输入用户名"></el-input>

      </el-form-item>

      <el-form-item prop="password">

        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>

      </el-form-item>

      <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>

    </el-form>
  </div>
</template>

<script>

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
      }
    }
  },
  methods: {
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {

          // 请求登录接口
          this.postRequest('/login', this.loginForm).then(resp => {
            console.log(JSON.stringify(resp) + '/login信息')
            if (resp) {
              // 存储用户 token 到 sessionStorage
              const token = resp.data.token;
              window.sessionStorage.setItem('token', token);

              this.getRequest('/user/info').then(resp => {
                console.log(JSON.stringify(resp) + '/user/info信息')
                if (resp) {
                  // 存储用户 信息 到 sessionStorage
                  const user = resp.data.account;
                  const userImageUrl = resp.data.imageUrl;
                  window.sessionStorage.setItem('user', user);
                  window.sessionStorage.setItem('userImgUrl', userImageUrl);
                  console.log(user)
                  this.$router.push('/home') // 路由跳转，无法	回退到上一页
                  console.log('跳转至/home')
                  console.log(userImageUrl)
                }
              })

              // this.$router.push('/home') // 路由跳转，可以回退到上一页

            }
          })

        } //else {
        //   this.$message.error('请输入所有字段！')
        //   return false;
        // }
      });
    }
  },
  //创建前设置
  beforeCreate () {
    // document.querySelector('body').setAttribute('style', 'background-image:url(/picture/i/ztiGcR);')
  },
//销毁前清除
  beforeDestroy () {
    // document.querySelector('body').removeAttribute('style')
  }
}
</script>

<style scoped>
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 280px auto;
  width: 350px;
  padding: 15px 35px 25px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6a6;
}
.LoginPic{
  background-image: url("/src/assets/loginPic.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  /*padding: 0px;*/
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.loginTitle{
  text-align: center;
}
</style>